import { CSSProperties } from 'vue';

/**
 * 左侧边栏-操作项-样式
 */
export function usePageLeftOperationItem() {
  const sideBarOperationItemWrapperStyle: CSSProperties = {
    userSelect: 'none',
    transition: 'background 20ms ease-in 0s',
    cursor: 'pointer',
    borderRadius: '3px',
    marginLeft: '4px',
    marginRight: '4px, width: calc(100% - 8px)',
  };
  const sideBarOperationItemFlexContainerStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    fontSize: '14px',
    minHeight: '27px',
    padding: '2px 10px',
    marginTop: '1px',
    marginBottom: '1px, color: rgb(77, 75, 73)',
  };
  const sideBarOperationItemIconWrapperStyle: CSSProperties = {
    flexShrink: 0,
    flexGrow: 0,
    borderRadius: '3px',
    color: 'rgba(55, 53, 47, 0.65)',
    width: '22px',
    height: '22px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: '8px',
  };
  const sideBarOperationItemNameWrapperStyle: CSSProperties = {
    flex: '1 1 auto',
    whiteSpace: 'nowrap',
    minWidth: '0px',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  };
  return {
    sideBarOperationItemWrapperStyle,
    sideBarOperationItemFlexContainerStyle,
    sideBarOperationItemIconWrapperStyle,
    sideBarOperationItemNameWrapperStyle,
  };
}
